import React, { useState } from 'react'
import { TabBar } from 'antd-mobile'
import Icon from '../Icon'
import { useLocation, useNavigate } from 'umi'
import '../tabBar/index.scss'
export default function SetTabBar() {
  const navigate = useNavigate()
  //跳转路由
  const goRouter = (key: any) => {
    navigate(key)
  }
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon:(active: boolean) => <Icon name='shouye' size={22} color={active?'#fc5a5a':'#333'}/>,
    },
    {
      key: '/cate',
      title: '分类',
      icon:(active: boolean) => <Icon name='fenlei' size={22} color={active?'#fc5a5a':'#333'}/>,
    },
    {
      key: '/cart',
      title: '购物车',
      icon:(active: boolean) => <Icon name='gouwuche' size={22} color={active?'#fc5a5a':'#333'}/>,
    },
    {
      key: '/user',
      title: '我的',
      icon: (active: boolean) => <Icon name='wodejuhuasuan' size={22} color={active?'#fc5a5a':'#333'}/>,
    },
  ]


  return (
    <div className='banner'>
      <TabBar activeKey={useLocation().pathname} onChange={goRouter}>
        {tabs.map(item => (
          <TabBar.Item
            key={item.key}
            icon={item.icon}
            title={ (active) => {
              return <span style={{ color:active? '#FF734C' : '#333' }}>{item.title}</span>
            }} />
        ))}
      </TabBar>
    </div>
  )
}